import Base from './Base.js';
import { GRAPH_TYPES } from './Graph.enum.js';

/**
 * Line
 */

class Line extends Base {
    constructor({ pos } = {}) {
        super(...arguments);
        this.name = GRAPH_TYPES.LINE;
        if (!this.points || !this.points.length) this.points = [pos, pos];
    }

    createPath() {
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, 5, 0, Math.PI * 2, false);
    }

    drawPath(ctx) {
        // console.log('Line.drawPath: ', ctx);
        ctx.beginPath();
        ctx.lineWidth = this.lineWidth;
        ctx.strokeStyle = this.strokeStyle;
        this.points.forEach((p, i) => {
            let y = this.isReverse ? -p.y : p.y;
            if (i === 0) {
                ctx.moveTo(p.x, y);
            } else {
                ctx.lineTo(p.x, y);
            }
        });
        // ctx.closePath();
        // ctx.stroke();
        // ctx.restore();
        // if (ctx) this.ctx = ctx;
        // ctx.beginPath();
        // this.ctx.lineWidth = this.lineWidth;
        // let p = this.points || [];
        // if (p.length === 2) {
        //     ctx.moveTo(p[0].x, -p[0].y);
        //     ctx.lineTo(p[1].x, -p[1].y);
        // }
        // }
        // ctx.strokeStyle = this.strokeStyle;
    }

    // 绘制两点之间线长度（同卷尺功能）
    drawLineLength(scaling) {
        this.ctx.save();

        let textSize = this.lineWidth;
        if (scaling) {
            textSize = (1 / scaling) * 20;
        }
        // console.log('Line.drawLineLength: ', ctx);
        let lineLength = this.getLineLength(this.points[0], this.points[1]),
            middlePoint = this.getLineMiddlePoint(this.points[0], this.points[1]);
        // textFontSize = this.lineWidth * 30;
        this.ctx.font = textSize + 'px Arial';
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'bottom';
        this.ctx.fillText(lineLength, middlePoint.x, -middlePoint.y - 50);
        this.ctx.stroke();
        this.ctx.restore();
    }

    drawSelected(ctx) {
        console.log('Line.drawSelected: ', ctx);
        if (ctx) this.ctx = ctx;
        this.ctx.save();
        // this.ctx.lineWidth = this.lineWidth;
        // this.ctx.strokeStyle = this.strokeStyle;
        this.drawPath(this.ctx);
        this.ctx.stroke();
        this.ctx.restore();
    }

    draw(ctx) {
        if (ctx) this.ctx = ctx;

        this.ctx.save();
        // this.ctx.beginPath();
        // this.points.forEach((p, i) => {
        //     let y = this.isReverse ? -p.y : p.y;
        //     if (i == 0) {
        //         this.ctx.moveTo(p.x, y);
        //     } else {
        //         this.ctx.lineTo(p.x, y);
        //     }
        // });
        this.drawPath(this.ctx);
        // 绘制两点之间线的长度（同卷尺功能）
        // this.drawLineLength(this.points[0], this.points[1]);

        // this.ctx.closePath();
        this.ctx.stroke();
        this.ctx.restore();
        // console.log('Line.draw: ', this, JSON.stringify(this.points));

        //绘制平移/更新图形锚点基准点
        // this.drawAnchorPoint();
        //绘制未连接点 - 未避免车辆绘制，修改到Painter中调用
        // this.drawUnConnectPoints();
    }

    drawCached(ctx) {
        ctx.save();
        // this.drawPath(ctx);
        let penSize = 1 / this.scaling || 100;
        // ctx.fillStyle = Color.lightenDarkenColor(this.fillStyle, 0.3);
        // ctx.fill();
        ctx.lineWidth = penSize * 5;
        ctx.strokeStyle = 'rgba(0, 0, 255, 0.6)';
        ctx.setLineDash([penSize * 10, penSize * 10]);
        ctx.lineCap = 'round';
        ctx.stroke();
        ctx.restore();
    }

    drawPathLine(ctx) {
        if (ctx) this.ctx = ctx;

        this.ctx.save();
        this.drawPath(this.ctx);
        this.ctx.stroke();
        this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
        this.ctx.lineCap = 'butt';
        this.ctx.setLineDash([this.ctx.lineWidth]);
        this._pathMarch.call(this, this.ctx);
        this.ctx.lineDashOffset = -this.offset;
        this.ctx.stroke();
        this.ctx.restore();
    }
    _pathMarch(ctx) {
        if (!this.offset || this.offset > ctx.lineWidth * 2) this.offset = 0;
        this.offset += ctx.lineWidth / 10;
        // console.log(this.offset);
    }
    drawCenter(scaling) {
        this.x = (parseInt(this.points[0].x) + parseInt(this.points[1].x)) / 2;
        this.y = (parseInt(this.points[0].y) + parseInt(this.points[1].y)) / 2;
        // console.log('Bezier.drawCenter-this.points[0].x,y:', this.points[0].x, this.points[0].y);
        // console.log('Bezier.drawCenter-this.points[3].x,y:', this.points[1].x, this.points[1].y);
        // console.log('Bezier.drawCenter-x,y:', this.x, this.y, this.isReverse);
        super.drawCenter(scaling);
    }

    _getPathDescription(points) {
        let d = 'M' + points[0].x + ',' + points[0].y + (points.length > 2 ? 'C' : 'L');
        for (let i = 1; i < points.length; i++) d += points[i].x + ',' + points[i].y + ' ';
        return d;
    }
    getSVGCodes() {
        // <path fill="none" stroke-linecap="round" stroke="rgba(0,0,211,0.62)" d="M-35000,85000C-35000,85000 -30000,85000 -30000,85000 " stroke-width="100"></path>
        let codes = '<path fill="none" stroke-linecap="round" ';
        codes += 'stroke="' + this.strokeStyle + '" ';
        codes += 'stroke-width="' + this.lineWidth + '" ';
        codes += 'd="' + this._getPathDescription(this.points) + '" ';
        codes += '></path>';
        return codes;
    }
}
export default Line;
